<script setup lang="ts">
// @ts-ignore
import MarkdownPreview from '@/components/Markdown/MarkdownPreview.vue'
import { onMounted, ref } from 'vue'
const { Title, Context, InputDescription, OutputDescription, CreatedBy, Tip, JudgeSample, JudgeConfig } = defineProps([
    'Title',
    'Context',
    'InputDescription',
    'OutputDescription',
    'CreatedBy',
    'Tip',
    'JudgeSample',
    'JudgeConfig'
])
const display = ref('')

onMounted(() => {
    var res = ''
    JudgeSample.forEach((item, index) => {
        res += `### 样例输入${index + 1}\n\n\`\`\`\n${item.input} \n\`\`\`\n`
        res += `### 样例输出${index + 1}\n\n\`\`\`\n${item.expected}\n \`\`\`\n`
        if (index != JudgeSample.length - 1) {
            res += `--- \n\n`
        }
        display.value = `# ${Title}\n\n` +
            `时空限制: ${JudgeConfig.time_limit}s  ${JudgeConfig.memory_limit}MB\n\n` +
            `## 题目描述\n${Context} \n\n` +
            `## 输入格式\n${InputDescription}\n\n` +
            `## 输出格式\n${OutputDescription}\n\n ` +
            `## 样例\n${res}\n\n` +
            `## 提示\n ${Tip} \n\n` +
            `### 造题人\n${CreatedBy} `
    }
    )
})
</script>

<template>
    <div class="problem-preview" style="overflow-y: auto">
        <MarkdownPreview :text="display" />
    </div>
</template>

<style scoped></style>
